<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import { darkTheme, zhCN, NConfigProvider, NBackTop } from 'naive-ui'
</script>

<template>
  <n-config-provider :theme="darkTheme" :locale="zhCN">
    <header>
      <nav>
        <RouterLink to="/" style=""> Pink Crimson's Blog </RouterLink>
      </nav>
    </header>
    <RouterView />
    <footer>Copyright © Pink Crimson's Blog 2023</footer>
    <n-back-top />
  </n-config-provider>
</template>

<style scoped>
nav a {
  margin-left: 20px;
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}

header {
  position: absolute;
  width: 100%;
  height: 60px;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  color: white;
  font-weight: bold;
}

footer {
  width: 100%;
  margin: unset;
  display: flex;
  justify-content: center;
  padding-bottom: 24px;
  color: grey;
}
</style>
